<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册账号 - 多种方式快速注册</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置 Tailwind -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#2563EB",
              secondary: "#10B981",
              danger: "#EF4444",
              neutral: {
                50: "#F9FAFB",
                100: "#F3F4F6",
                200: "#E5E7EB",
                300: "#D1D5DB",
                600: "#4B5563",
                700: "#374151",
                800: "#1F2937",
                900: "#111827",
              },
            },
            fontFamily: {
              sans: ["Inter", "system-ui", "sans-serif"],
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .form-input {
          @apply w-full px-4 py-2.5 pl-10 border border-neutral-300 dark:border-neutral-700 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all bg-white dark:bg-neutral-800;
        }
        .btn-primary {
          @apply w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50;
        }
        .btn-outline {
          @apply w-full border border-neutral-300 dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-neutral-600 bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 text-neutral-700 dark:text-neutral-300 font-medium py-2.5 px-4 rounded-lg transition-all duration-300 flex items-center justify-center space-x-2;
        }
        .icon-wrapper {
          @apply absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 pointer-events-none;
        }
      }
    </style>
  </head>

  <body
    class="bg-gray-50 dark:bg-neutral-900 font-sans text-neutral-800 dark:text-neutral-200 min-h-screen transition-colors duration-300"
  >
    <!-- 暗黑模式切换按钮 -->
    <button
      id="theme-toggle"
      class="fixed top-4 right-4 p-2 rounded-full bg-white dark:bg-neutral-800 shadow-md hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors z-50"
    >
      <i class="fa fa-sun-o dark:hidden text-yellow-500"></i>
      <i class="fa fa-moon-o hidden dark:block text-blue-300"></i>
    </button>

    <div class="container mx-auto px-4 py-8 md:py-16 max-w-5xl">
      <!-- 网站标志 -->
      <div class="text-center mb-8 md:mb-12">
        <div class="inline-flex items-center">
          <div
            class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center"
          >
            <i class="fa fa-user-plus text-white text-xl"></i>
          </div>
          <span class="ml-3 text-2xl font-bold text-neutral-800 dark:text-white"
            >AccountHub</span
          >
        </div>
      </div>

      <!-- 注册卡片 -->
      <div
        class="bg-white dark:bg-neutral-800 rounded-xl shadow-md max-w-2xl mx-auto overflow-hidden transition-colors duration-300"
      >
        <!-- 标题区域 -->
        <div
          class="p-6 md:p-8 border-b border-neutral-200 dark:border-neutral-700"
        >
          <h1 class="text-2xl md:text-3xl font-bold text-center mb-2">
            创建新账号
          </h1>
          <p class="text-center text-neutral-600 dark:text-neutral-400">
            选择一种注册方式，快速加入我们
          </p>
        </div>

        <!-- 注册方式选择 -->
        <div class="p-6 md:p-8">
          <!-- 注册选项卡 -->
          <div
            class="flex border-b border-neutral-200 dark:border-neutral-700 mb-6"
          >
            <button
              id="phone-tab"
              class="pb-3 px-1 font-medium text-primary border-b-2 border-primary"
            >
              手机号码注册
            </button>
            <button
              id="email-tab"
              class="pb-3 px-4 font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white"
            >
              邮箱注册
            </button>
          </div>

          <!-- 手机号码注册表单 -->
          <div id="phone-form" class="space-y-5">
            <div>
              <label
                for="phone"
                class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1.5"
                >手机号码</label
              >
              <div class="relative">
                <div class="icon-wrapper">
                  <i class="fa fa-phone"></i>
                </div>
                <input
                  type="tel"
                  id="phone"
                  class="form-input"
                  placeholder="请输入手机号码"
                  maxlength="11"
                />
              </div>
              <p class="text-danger text-xs mt-1 hidden" id="phone-error">
                请输入有效的手机号码
              </p>
            </div>

            <div class="grid grid-cols-3 gap-4">
              <div>
                <label
                  for="code"
                  class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1.5"
                  >验证码</label
                >
                <div class="relative">
                  <div class="icon-wrapper">
                    <i class="fa fa-shield"></i>
                  </div>
                  <input
                    type="text"
                    id="code"
                    class="form-input"
                    placeholder="验证码"
                    maxlength="6"
                  />
                </div>
              </div>
              <div class="col-span-2 flex items-end">
                <button
                  type="button"
                  id="get-code"
                  class="w-full py-2.5 px-4 border border-primary text-primary hover:bg-primary/5 rounded-lg transition-colors font-medium"
                >
                  获取验证码
                </button>
              </div>
            </div>

            <div>
              <label
                for="phone-password"
                class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1.5"
                >设置密码</label
              >
              <div class="relative">
                <div class="icon-wrapper">
                  <i class="fa fa-lock"></i>
                </div>
                <input
                  type="password"
                  id="phone-password"
                  class="form-input"
                  placeholder="请设置密码（至少6位）"
                />
              </div>
            </div>

            <div class="pt-2">
              <button type="button" id="phone-register" class="btn-primary">
                注册账号
              </button>
            </div>
          </div>

          <!-- 邮箱注册表单 (默认隐藏) -->
          <div id="email-form" class="space-y-5 hidden">
            <div>
              <label
                for="email"
                class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1.5"
                >电子邮箱</label
              >
              <div class="relative">
                <div class="icon-wrapper">
                  <i class="fa fa-envelope"></i>
                </div>
                <input
                  type="email"
                  id="email"
                  class="form-input"
                  placeholder="请输入电子邮箱"
                />
              </div>
              <p class="text-danger text-xs mt-1 hidden" id="email-error">
                请输入有效的电子邮箱
              </p>
            </div>

            <div>
              <label
                for="email-password"
                class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1.5"
                >设置密码</label
              >
              <div class="relative">
                <div class="icon-wrapper">
                  <i class="fa fa-lock"></i>
                </div>
                <input
                  type="password"
                  id="email-password"
                  class="form-input"
                  placeholder="请设置密码（至少6位）"
                />
              </div>
            </div>

            <div class="pt-2">
              <button type="button" id="email-register" class="btn-primary">
                注册账号
              </button>
            </div>
          </div>

          <!-- 其他注册方式 -->
          <div class="mt-8">
            <div class="relative flex items-center py-2">
              <div
                class="flex-grow border-t border-neutral-200 dark:border-neutral-700"
              ></div>
              <span
                class="flex-shrink mx-4 text-xs text-neutral-500 dark:text-neutral-500"
                >或使用以下方式注册</span
              >
              <div
                class="flex-grow border-t border-neutral-200 dark:border-neutral-700"
              ></div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
              <button type="button" class="btn-outline">
                <i class="fa fa-weixin text-[#07C160]"></i>
                <span class="text-sm">微信</span>
              </button>

              <button type="button" class="btn-outline">
                <i class="fa fa-qq text-[#12B7F5]"></i>
                <span class="text-sm">QQ</span>
              </button>

              <button type="button" class="btn-outline">
                <i class="fa fa-weibo text-[#E6162D]"></i>
                <span class="text-sm">微博</span>
              </button>

              <button type="button" class="btn-outline">
                <i class="fa fa-google text-[#DB4437]"></i>
                <span class="text-sm">谷歌</span>
              </button>
            </div>
          </div>

          <!-- 已有账号 -->
          <div class="mt-8 text-center">
            <p class="text-neutral-600 dark:text-neutral-400">
              已有账号?
              <a href="#" class="text-primary font-medium hover:underline"
                >立即登录</a
              >
            </p>
          </div>

          <!-- 隐私条款 -->
          <div class="mt-6 text-center">
            <p class="text-xs text-neutral-500 dark:text-neutral-500">
              点击注册，即表示您同意我们的
              <a href="#" class="text-primary hover:underline">服务条款</a>
              和
              <a href="#" class="text-primary hover:underline">隐私政策</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 注册成功提示 (默认隐藏) -->
    <div
      id="success-toast"
      class="fixed top-6 right-6 bg-white dark:bg-neutral-800 shadow-lg rounded-lg p-4 max-w-xs transform translate-x-full opacity-0 transition-all duration-500 z-50"
    >
      <div class="flex items-start space-x-3">
        <div
          class="mt-0.5 w-6 h-6 rounded-full bg-secondary/20 flex items-center justify-center flex-shrink-0"
        >
          <i class="fa fa-check text-secondary text-xs"></i>
        </div>
        <div>
          <h3 class="text-sm font-medium">注册成功</h3>
          <p class="text-xs text-neutral-600 dark:text-neutral-400 mt-0.5">
            您的账号已创建，正在跳转...
          </p>
        </div>
        <button
          id="close-toast"
          class="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>

    <script>
      // 暗黑模式切换功能
      const html = document.documentElement;
      const themeToggle = document.getElementById("theme-toggle");

      // 检查用户偏好或本地存储的主题设置
      function checkThemePreference() {
        const savedTheme = localStorage.getItem("darkMode");
        if (savedTheme !== null) {
          return savedTheme === "true";
        }
        return window.matchMedia("(prefers-color-scheme: dark)").matches;
      }

      // 应用主题设置
      function applyTheme(isDark) {
        if (isDark) {
          html.classList.add("dark");
        } else {
          html.classList.remove("dark");
        }
        localStorage.setItem("darkMode", isDark);
      }

      // 初始化主题
      applyTheme(checkThemePreference());

      // 绑定主题切换事件
      themeToggle.addEventListener("click", () => {
        const isDark = html.classList.toggle("dark");
        applyTheme(isDark);
      });

      // 选项卡切换功能
      const phoneTab = document.getElementById("phone-tab");
      const emailTab = document.getElementById("email-tab");
      const phoneForm = document.getElementById("phone-form");
      const emailForm = document.getElementById("email-form");

      phoneTab.addEventListener("click", () => {
        // 切换选项卡样式
        phoneTab.classList.add("text-primary", "border-b-2", "border-primary");
        phoneTab.classList.remove("text-neutral-600", "dark:text-neutral-400");
        emailTab.classList.remove(
          "text-primary",
          "border-b-2",
          "border-primary"
        );
        emailTab.classList.add("text-neutral-600", "dark:text-neutral-400");

        // 切换表单显示
        phoneForm.classList.remove("hidden");
        emailForm.classList.add("hidden");
      });

      emailTab.addEventListener("click", () => {
        // 切换选项卡样式
        emailTab.classList.add("text-primary", "border-b-2", "border-primary");
        emailTab.classList.remove("text-neutral-600", "dark:text-neutral-400");
        phoneTab.classList.remove(
          "text-primary",
          "border-b-2",
          "border-primary"
        );
        phoneTab.classList.add("text-neutral-600", "dark:text-neutral-400");

        // 切换表单显示
        emailForm.classList.remove("hidden");
        phoneForm.classList.add("hidden");
      });

      // 验证码倒计时功能
      const getCodeBtn = document.getElementById("get-code");
      const phoneInput = document.getElementById("phone");
      const phoneError = document.getElementById("phone-error");

      getCodeBtn.addEventListener("click", () => {
        const phone = phoneInput.value.trim();
        const phoneRegex = /^1[3-9]\d{9}$/;

        // 验证手机号码
        if (!phoneRegex.test(phone)) {
          phoneInput.classList.add("border-danger");
          phoneError.classList.remove("hidden");
          return;
        }

        // 清除错误状态
        phoneInput.classList.remove("border-danger");
        phoneError.classList.add("hidden");

        // 倒计时功能
        let countdown = 60;
        getCodeBtn.disabled = true;
        getCodeBtn.textContent = `重新发送(${countdown}s)`;
        getCodeBtn.classList.add("opacity-70", "cursor-not-allowed");

        const timer = setInterval(() => {
          countdown--;
          getCodeBtn.textContent = `重新发送(${countdown}s)`;

          if (countdown <= 0) {
            clearInterval(timer);
            getCodeBtn.disabled = false;
            getCodeBtn.textContent = "获取验证码";
            getCodeBtn.classList.remove("opacity-70", "cursor-not-allowed");
          }
        }, 1000);

        // 这里可以添加发送验证码的API请求
        console.log(`向手机号 ${phone} 发送验证码`);
      });

      // 手机号码输入验证
      phoneInput.addEventListener("input", () => {
        const phone = phoneInput.value.trim();
        const phoneRegex = /^1[3-9]\d{9}$/;

        if (phone && !phoneRegex.test(phone)) {
          phoneInput.classList.add("border-danger");
          phoneError.classList.remove("hidden");
        } else {
          phoneInput.classList.remove("border-danger");
          phoneError.classList.add("hidden");
        }
      });

      // 邮箱输入验证
      const emailInput = document.getElementById("email");
      const emailError = document.getElementById("email-error");

      emailInput.addEventListener("input", () => {
        const email = emailInput.value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (email && !emailRegex.test(email)) {
          emailInput.classList.add("border-danger");
          emailError.classList.remove("hidden");
        } else {
          emailInput.classList.remove("border-danger");
          emailError.classList.add("hidden");
        }
      });

      // 手机号码注册
      const phoneRegisterBtn = document.getElementById("phone-register");
      const codeInput = document.getElementById("code");
      const phonePasswordInput = document.getElementById("phone-password");

      phoneRegisterBtn.addEventListener("click", () => {
        const phone = phoneInput.value.trim();
        const code = codeInput.value.trim();
        const password = phonePasswordInput.value.trim();
        const phoneRegex = /^1[3-9]\d{9}$/;

        let isValid = true;

        // 验证手机号码
        if (!phoneRegex.test(phone)) {
          phoneInput.classList.add("border-danger");
          phoneError.classList.remove("hidden");
          isValid = false;
        }

        // 验证验证码
        if (!code || code.length !== 6) {
          codeInput.classList.add("border-danger");
          isValid = false;
        } else {
          codeInput.classList.remove("border-danger");
        }

        // 验证密码
        if (!password || password.length < 6) {
          phonePasswordInput.classList.add("border-danger");
          isValid = false;
        } else {
          phonePasswordInput.classList.remove("border-danger");
        }

        if (isValid) {
          // 显示成功提示
          showSuccessToast();
          console.log(
            `手机号注册 - 手机号: ${phone}, 验证码: ${code}, 密码: ${password}`
          );
        }
      });

      // 邮箱注册
      const emailRegisterBtn = document.getElementById("email-register");
      const emailPasswordInput = document.getElementById("email-password");

      emailRegisterBtn.addEventListener("click", () => {
        const email = emailInput.value.trim();
        const password = emailPasswordInput.value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        let isValid = true;

        // 验证邮箱
        if (!emailRegex.test(email)) {
          emailInput.classList.add("border-danger");
          emailError.classList.remove("hidden");
          isValid = false;
        }

        // 验证密码
        if (!password || password.length < 6) {
          emailPasswordInput.classList.add("border-danger");
          isValid = false;
        } else {
          emailPasswordInput.classList.remove("border-danger");
        }

        if (isValid) {
          // 显示成功提示
          showSuccessToast();
          console.log(`邮箱注册 - 邮箱: ${email}, 密码: ${password}`);
        }
      });

      // 社交账号注册
      const socialButtons = document.querySelectorAll(".btn-outline");
      socialButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const platform = button.querySelector("span").textContent;
          console.log(`使用${platform}注册`);
          alert(`即将跳转到${platform}授权页面`);
        });
      });

      // 显示成功提示
      function showSuccessToast() {
        const successToast = document.getElementById("success-toast");
        successToast.classList.remove("translate-x-full", "opacity-0");

        // 3秒后隐藏提示
        const toastTimeout = setTimeout(() => {
          successToast.classList.add("translate-x-full", "opacity-0");
        }, 3000);

        // 手动关闭提示
        document.getElementById("close-toast").addEventListener("click", () => {
          successToast.classList.add("translate-x-full", "opacity-0");
          clearTimeout(toastTimeout);
        });
      }
    </script>
  </body>
</html>
